<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心理学必懂的100个心理学效应</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* 自定义莫兰迪色系 */
        :root {
            --morandi-bg-light: #F0F2F5; /* 浅灰米色背景 */
            --morandi-primary: #C5D8D0; /* 柔和的绿色/蓝色调 */
            --morandi-secondary: #D9C8BE; /* 柔和的米色/粉色调 */
            --morandi-accent: #B0B5BF; /* 柔和的灰色调 */
            --morandi-text-dark: #333C4A; /* 深灰蓝文字 */
            --morandi-text-light: #6C7A89; /* 浅灰蓝文字 */
            --morandi-card-bg: #E8EDE7; /* 卡片背景色，略带绿调 */
        }

        body {
            font-family: 'Inter', 'Noto Serif SC', sans-serif;
            background-color: var(--morandi-bg-light);
            color: var(--morandi-text-dark);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            line-height: 1.6;
        }

        .container {
            background-color: white;
            border-radius: 1.5rem; /* rounded-3xl */
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* shadow-xl */
            max-width: 900px;
            width: 100%;
            padding: 2.5rem; /* p-10 */
            text-align: center;
        }

        .card-container {
            background-color: var(--morandi-card-bg);
            border-radius: 1.5rem; /* rounded-3xl */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* 更深的阴影 */
            padding: 2rem; /* p-8 */
            margin-top: 2rem; /* mt-8 */
            text-align: left;
            display: none; /* 初始隐藏 */
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden; /* 确保阴影和圆角 */
        }

        .card-title {
            font-family: 'Noto Serif SC', serif;
            font-size: 2.5rem; /* text-4xl */
            font-weight: 700;
            color: var(--morandi-text-dark);
            margin-bottom: 0.5rem; /* mb-2 */
        }

        .card-subtitle {
            font-style: italic; /* 斜体 */
            font-size: 1.25rem; /* text-xl */
            color: var(--morandi-text-light);
            margin-bottom: 2rem; /* mb-8 */
            text-align: right;
            border-bottom: 1px solid var(--morandi-accent);
            padding-bottom: 0.5rem;
        }

        .section-title {
            display: inline-block;
            background-color: var(--morandi-primary);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.75rem; /* rounded-xl */
            font-weight: 600;
            margin-bottom: 1rem; /* mb-4 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 小色块阴影 */
            font-family: 'Inter', sans-serif;
        }

        .section-content {
            margin-bottom: 1.5rem; /* mb-6 */
            font-size: 1.1rem;
            color: var(--morandi-text-dark);
        }

        .section-content ul {
            list-style: none; /* 移除默认列表点 */
            padding-left: 0;
        }

        .section-content ul li {
            position: relative;
            padding-left: 1.5em; /* 留出空间给自定义点 */
            margin-bottom: 0.5em;
        }

        .section-content ul li::before {
            content: '•'; /* 使用实心圆点 */
            color: var(--morandi-accent); /* 点的颜色 */
            position: absolute;
            left: 0;
            font-weight: bold;
        }

        .btn {
            background-color: var(--morandi-primary);
            color: white;
            padding: 1rem 2rem;
            border-radius: 9999px; /* rounded-full */
            font-size: 1.25rem; /* text-xl */
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            margin: 0 10px;
        }

        .btn:hover {
            background-color: var(--morandi-accent);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }

        .home-screen, .card-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .card-screen {
            display: none; /* 初始隐藏 */
        }

        @media (max-width: 768px) {
            .container {
                padding: 1.5rem;
            }
            .card-container {
                padding: 1.5rem;
            }
            .card-title {
                font-size: 2rem;
            }
            .card-subtitle {
                font-size: 1rem;
            }
            .section-title {
                padding: 0.4rem 0.8rem;
                font-size: 0.9rem;
            }
            .section-content {
                font-size: 1rem;
            }
            .btn {
                padding: 0.8rem 1.5rem;
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="home-screen" class="home-screen">
            <h1 class="card-title mb-8">心理学必懂的100个心理学效应</h1>
            <button id="start-draw-btn" class="btn">抽卡</button>
        </div>

        <div id="card-screen" class="card-screen">
            <div id="psychology-card" class="card-container">
                <h2 class="card-title" id="card-effect-name"></h2>
                <p class="card-subtitle" id="card-english-name"></p>

                <div id="card-content">
                    <!-- 卡片内容将通过JavaScript动态加载 -->
                </div>
            </div>
            <div class="mt-8 flex justify-center">
                <button id="draw-again-btn" class="btn">再抽一张</button>
                <button id="back-home-btn" class="btn ml-4">返回主页</button>
            </div>
        </div>
    </div>

    <script>
        const terms = [
            {
                name: "确认偏误",
                english: "Confirmation Bias",
                sections: [
                    { title: "定义", content: "人们倾向于寻找、解释和记住那些证实自己已有信念的信息，而忽视或贬低与自己观点相冲突的证据。这是认知偏误中最普遍的一种。" },
                    { title: "表现形式", content: [
                        "选择性搜索：主动寻找支持性信息",
                        "选择性解释：将模糊信息解释为有利证据",
                        "选择性记忆：更容易记住符合预期的信息"
                    ]},
                    { title: "现代挑战", content: [
                        "信息茧房：算法推荐强化既有观点；",
                        "极化现象：不同立场群体越来越对立；",
                        "假消息传播：人们更相信符合预期的虚假信息；",
                        "投资决策：忽视不利信息导致错误判断。"
                    ]}
                ]
            },
            {
                name: "锚定效应",
                english: "Anchoring Effect",
                sections: [
                    { title: "定义", content: "人们在进行判断时，会过度依赖最初获得的信息（锚点），即使这个信息与当前判断无关。" },
                    { title: "表现形式", content: [
                        "谈判：先开价者往往占优；",
                        "商品定价：原价或折扣价作为参考；",
                        "估算：对某个数字的初始猜测影响最终结果。"
                    ]},
                    { title: "应用场景", content: [
                        "销售策略：设定高参考价；",
                        "谈判技巧：率先提出有利条件；",
                        "日常决策：警惕初始信息的影响。"
                    ]}
                ]
            },
            {
                name: "羊群效应",
                english: "Herd Behavior",
                sections: [
                    { title: "定义", content: "个人无意识地受到群体行为影响，模仿多数人的行动，而不考虑自己的独立判断。" },
                    { title: "表现形式", content: [
                        "时尚潮流：追随流行趋势；",
                        "投资市场：盲目跟风买卖；",
                        "社会事件：公众舆论的引导。"
                    ]},
                    { title: "负面影响", content: [
                        "群体非理性：导致盲目决策；",
                        "风险累积：放大市场泡沫或恐慌；",
                        "创新抑制：阻碍独立思考和探索。"
                    ]}
                ]
            },
            {
                name: "从众效应",
                english: "Conformity Effect",
                sections: [
                    { title: "定义", content: "个体在群体压力下，放弃自己的意见或行为，与群体保持一致的现象。与羊群效应相似但更强调“压力”。" },
                    { title: "表现形式", content: [
                        "阿希实验：对错误答案的顺从；",
                        "集体决策：少数服从多数；",
                        "社会规范：遵循约定俗成的行为模式。"
                    ]},
                    { title: "积极与消极", content: [
                        "积极：维护社会稳定、促进协作；",
                        "消极：压抑个性、阻碍创新、导致错误决策。"
                    ]}
                ]
            },
            {
                name: "光环效应",
                english: "Halo Effect",
                sections: [
                    { title: "定义", content: "对一个人或事物某个突出特点的积极评价，影响到对其其他方面也产生积极评价的认知偏误。" },
                    { title: "表现形式", content: [
                        "外貌：长得好看的人更易被认为聪明、善良；",
                        "品牌：知名品牌的产品被认为质量更好；",
                        "名人：对偶像的优点无限放大。"
                    ]},
                    { title: "应用场景", content: [
                        "招聘：第一印象很重要；",
                        "营销：明星代言、品牌形象建设；",
                        "人际交往：注意避免以偏概全。"
                    ]}
                ]
            },
            {
                name: "首因效应",
                english: "Primacy Effect",
                sections: [
                    { title: "定义", content: "在人际交往中，最先接触到的信息对人产生的影响最大，形成最初的印象。" },
                    { title: "表现形式", content: [
                        "面试：开场表现的重要性；",
                        "演讲：开篇的吸引力；",
                        "产品发布：首次亮相的冲击力。"
                    ]},
                    { title: "应用场景", content: [
                        "简历制作：突出优势；",
                        "初次见面：注重形象和言谈；",
                        "信息传递：将重要内容前置。"
                    ]}
                ]
            },
            {
                name: "近因效应",
                english: "Recency Effect",
                sections: [
                    { title: "定义", content: "在人际交往中，最近接触到的信息对人产生的影响最大，通常发生在多次接触后。" },
                    { title: "表现形式", content: [
                        "长期关系：最近一次的表现影响评价；",
                        "辩论：最后的总结陈词；",
                        "考试：临考记忆的有效性。"
                    ]},
                    { title: "应用场景", content: [
                        "汇报总结：强调近期成就；",
                        "挽回关系：改善近期表现；",
                        "学习方法：临考复习。"
                    ]}
                ]
            },
            {
                name: "刻板印象",
                english: "Stereotype",
                sections: [
                    { title: "定义", content: "对某一群体（如某一民族、职业、性别）形成的一套固定的、简单化的概括和评价，通常带有偏见。" },
                    { title: "表现形式", content: [
                        "地域歧视：对某个地方的人的固有看法；",
                        "性别刻板印象：认为男性或女性应有的特点；",
                        "职业刻板印象：对某种职业人群的标签。"
                    ]},
                    { title: "负面影响", content: [
                        "阻碍了解个体：忽视差异性；",
                        "导致歧视：不公平对待；",
                        "影响自我认知：内化刻板印象。"
                    ]}
                ]
            },
            {
                name: "登门槛效应",
                english: "Foot-in-the-Door Technique",
                sections: [
                    { title: "定义", content: "一个人如果接受了别人一个微不足道的要求，为了保持认知上的连贯性，他就更可能接受一个更大的要求。" },
                    { title: "表现形式", content: [
                        "销售：先让顾客试用小样品；",
                        "募捐：先请求小额捐款；",
                        "人际请求：从小忙开始。"
                    ]},
                    { title: "应用场景", content: [
                        "说服：循序渐进地提出要求；",
                        "行为改变：从小目标开始；",
                        "教育：设置易于达成的学习任务。"
                    ]}
                ]
            },
            {
                name: "承诺升级",
                english: "Escalation of Commitment",
                sections: [
                    { title: "定义", content: "即使证据表明先前的决策是错误的，个体或群体仍然倾向于坚持或进一步投入资源，以证明过去的投入是合理的。" },
                    { title: "表现形式", content: [
                        "沉没成本：对已投入资源的不舍；",
                        "项目管理：即使项目失败也继续投入；",
                        "赌博：输钱后继续下注试图赢回。"
                    ]},
                    { title: "避免方法", content: [
                        "设立止损点：及时止损；",
                        "引入外部意见：避免主观偏见；",
                        "承认错误：勇于修正。"
                    ]}
                ]
            },
            {
                name: "霍桑效应",
                english: "Hawthorne Effect",
                sections: [
                    { title: "定义", content: "被观察者因为知道自己正在被观察，而改变行为的倾向。" },
                    { title: "表现形式", content: [
                        "员工表现：被关注时工作更努力；",
                        "学生学习：老师在场时更认真；",
                        "实验结果：受试者行为受实验环境影响。"
                    ]},
                    { title: "应用场景", content: [
                        "管理：适当的监督和激励；",
                        "教育：营造积极的学习氛围；",
                        "科研：注意实验设计的严谨性。"
                    ]}
                ]
            },
            {
                name: "习得性无助",
                english: "Learned Helplessness",
                sections: [
                    { title: "定义", content: "个体在经历多次失败和挫折后，认为自己无法控制结果，从而放弃努力，即使实际有机会成功。" },
                    { title: "表现形式", content: [
                        "学业：多次考试失败后放弃学习；",
                        "职场：多次尝试未果后不再争取晋升；",
                        "生活：长期逆境导致消极悲观。"
                    ]},
                    { title: "走出困境", content: [
                        "归因训练：改变对失败原因的解释；",
                        "小步成功：从易于实现的目标开始；",
                        "社会支持：寻求帮助和鼓励。"
                    ]}
                ]
            },
            {
                name: "瓦伦达效应",
                english: "Wallenda Effect",
                sections: [
                    { title: "定义", content: "当一个人过于关注某种心理活动（如成功或失败）时，反而会影响其正常发挥。" },
                    { title: "表现形式", content: [
                        "考试：过度紧张导致失误；",
                        "表演：过于在意观众反应而怯场；",
                        "体育比赛：关键时刻的心理压力。"
                    ]},
                    { title: "应对策略", content: [
                        "专注于过程：而不是结果；",
                        "放松心态：减轻压力；",
                        "心理暗示：积极引导自我。"
                    ]}
                ]
            },
            {
                name: "蔡格尼克效应",
                english: "Zeigarnik Effect",
                sections: [
                    { title: "定义", content: "人们对未完成的任务或工作，比已完成的任务有更强的记忆。" },
                    { title: "表现形式", content: [
                        "电视剧：悬念和未完待续吸引观众；",
                        "工作：未完成的任务总在脑海中盘旋；",
                        "学习：未解决的问题更容易记住。"
                    ]},
                    { title: "应用场景", content: [
                        "任务管理：利用中断提醒；",
                        "学习记忆：复习未掌握知识；",
                        "营销：制造悬念和好奇。"
                    ]}
                ]
            },
            {
                name: "罗森塔尔效应",
                english: "Rosenthal Effect (Pygmalion Effect)",
                sections: [
                    { title: "定义", content: "教师对学生的期望会影响学生的学习成绩，即期望效应。" },
                    { title: "表现形式", content: [
                        "教育：老师的鼓励提高学生自信；",
                        "管理：领导的信任激发员工潜力；",
                        "人际关系：积极的期望带来积极的结果。"
                    ]},
                    { title: "应用场景", content: [
                        "家庭教育：对孩子给予积极肯定；",
                        "团队建设：管理者信任员工；",
                        "自我激励：相信自己能够成功。"
                    ]}
                ]
            },
            {
                name: "马太效应",
                english: "Matthew Effect",
                sections: [
                    { title: "定义", content: "指强者愈强、弱者愈弱的现象，即优势累积效应。" },
                    { title: "表现形式", content: [
                        "财富：富者更富，贫者更贫；",
                        "学术：著名学者更容易获得资源；",
                        "社会地位：高社会地位者更易获得机会。"
                    ]},
                    { title: "应对策略", content: [
                        "扶持弱势：提供更多资源；",
                        "机会均等：创造公平竞争环境；",
                        "打破垄断：促进社会流动性。"
                    ]}
                ]
            },
            {
                name: "破窗效应",
                english: "Broken Windows Theory",
                sections: [
                    { title: "定义", content: "环境中的不良现象（如破窗）如果得不到及时修复，就会诱导更多人效仿，导致更严重的破坏。" },
                    { title: "表现形式", content: [
                        "社区治安：小犯罪不处理导致大犯罪；",
                        "企业管理：小违规不制止导致风气败坏；",
                        "个人习惯：小毛病不改导致大问题。"
                    ]},
                    { title: "应用场景", content: [
                        "城市管理：及时修复公共设施；",
                        "企业文化：从小事抓起，建立良好规范；",
                        "自我约束：及时纠正不良习惯。"
                    ]}
                ]
            },
            {
                name: "旁观者效应",
                english: "Bystander Effect",
                sections: [
                    { title: "定义", content: "在紧急情况下，如果有多人在场，个体提供帮助的倾向会降低，因为责任被分散了。" },
                    { title: "表现形式", content: [
                        "街头求助：围观者众而无人行动；",
                        "网络求助：大量转发而无实际帮助；",
                        "团队协作：责任推诿。"
                    ]},
                    { title: "应对策略", content: [
                        "明确求助对象：指定某人；",
                        "提供具体信息：明确需要什么帮助；",
                        "主动承担责任：克服旁观者心理。"
                    ]}
                ]
            },
            {
                name: "晕轮效应",
                english: "Halo Effect",
                sections: [
                    { title: "定义", content: "同“光环效应”。对一个人或事物某个突出特点的积极评价，影响到对其其他方面也产生积极评价的认知偏误。" },
                    { title: "表现形式", content: [
                        "外貌：长得好看的人更易被认为聪明、善良；",
                        "品牌：知名品牌的产品被认为质量更好；",
                        "名人：对偶像的优点无限放大。"
                    ]},
                    { title: "应用场景", content: [
                        "招聘：第一印象很重要；",
                        "营销：明星代言、品牌形象建设；",
                        "人际交往：注意避免以偏概全。"
                    ]}
                ]
            },
            {
                name: "蝴蝶效应",
                english: "Butterfly Effect",
                sections: [
                    { title: "定义", content: "在一个动力系统中，初始条件下微小的变化，可以导致整个系统长期且巨大的连锁反应。" },
                    { title: "表现形式", content: [
                        "天气预报：初始数据微小误差导致预报大偏差；",
                        "社会事件：小事件引发大动荡；",
                        "个人选择：微小决定改变人生轨迹。"
                    ]},
                    { title: "启示", content: [
                        "重视细节：小事可能产生大影响；",
                        "全局观念：考虑连锁反应；",
                        "不确定性：接受和适应变化。"
                    ]}
                ]
            },
            {
                name: "富兰克林效应",
                english: "Benjamin Franklin Effect",
                sections: [
                    { title: "定义", content: "相比于我们帮助过的人，那些曾帮助过我们的人更可能再次帮助我们。" },
                    { title: "表现形式", content: [
                        "人际关系：请求别人帮忙反而增进感情；",
                        "销售：让顾客小投入后再进行大消费；",
                        "政治：通过请求对手帮助来拉近关系。"
                    ]},
                    { title: "应用场景", content: [
                        "建立关系：适度请求他人帮助；",
                        "化解矛盾：尝试让对方提供帮助；",
                        "团队合作：鼓励互相帮助。"
                    ]}
                ]
            },
            {
                name: "认知失调",
                english: "Cognitive Dissonance",
                sections: [
                    { title: "定义", content: "当一个人的信念、态度或行为之间存在不一致时，会产生心理上的不适感，个体倾向于改变其中一个或多个以减少这种不适。" },
                    { title: "表现形式", content: [
                        "戒烟：知道吸烟有害但难以戒除，于是找理由合理化；",
                        "购物：买完高价商品后说服自己物有所值；",
                        "考试：成绩不佳时归咎于外部因素。"
                    ]},
                    { title: "应对方式", content: [
                        "改变行为：消除不一致；",
                        "改变信念：调整对事物的看法；",
                        "增加新认知：引入新信息以协调不一致。"
                    ]}
                ]
            },
            {
                name: "乐队花车效应",
                english: "Bandwagon Effect",
                sections: [
                    { title: "定义", content: "人们会因为某事物被更多人接受或做，就跟风选择或做某事。" },
                    { title: "表现形式", content: [
                        "投票：支持热门候选人；",
                        "消费：购买流行产品；",
                        "观点：采纳多数人的意见。"
                    ]},
                    { title: "应用场景", content: [
                        "广告营销：强调销量领先、大众选择；",
                        "政治宣传：制造声势；",
                        "社交：融入群体。"
                    ]}
                ]
            },
            {
                name: "自我实现预言",
                english: "Self-Fulfilling Prophecy",
                sections: [
                    { title: "定义", content: "个体对某事或某人抱有某种预期，这种预期会影响其行为，最终导致预期的实现。" },
                    { title: "表现形式", content: [
                        "学习：相信自己能考好，于是更努力；",
                        "人际：认为某人不喜欢自己，于是表现冷淡；",
                        "团队：认为项目会失败，于是投入不足。"
                    ]},
                    { title: "应用场景", content: [
                        "教育：积极暗示学生；",
                        "管理：建立正向的团队期望；",
                        "个人成长：设定积极目标并为之努力。"
                    ]}
                ]
            },
            {
                name: "焦点效应",
                english: "Spotlight Effect",
                sections: [
                    { title: "定义", content: "人们常常高估别人对自己外表、行为或言行的关注程度。" },
                    { title: "表现形式", content: [
                        "穿错衣服：觉得所有人都在看自己；",
                        "犯小错误：认为被无限放大；",
                        "演讲紧张：过度关注自己的表现。"
                    ]},
                    { title: "应对策略", content: [
                        "换位思考：别人可能没那么在意；",
                        "放松心态：减轻不必要的压力；",
                        "关注自我：专注于提升而非别人的看法。"
                    ]}
                ]
            },
            {
                name: "损失厌恶",
                english: "Loss Aversion",
                sections: [
                    { title: "定义", content: "人们对损失的感受要比对同等数量收益的感受更强烈。" },
                    { title: "表现形式", content: [
                        "投资：不愿止损，害怕卖出亏损股票；",
                        "营销：强调“失去”而非“得到”；",
                        "生活：害怕失去现有财产胜过获得更多。"
                    ]},
                    { title: "应用场景", content: [
                        "风险管理：设定止损点；",
                        "决策制定：权衡潜在损失；",
                        "营销策略：利用人们对损失的规避心理。"
                    ]}
                ]
            },
            {
                name: "稀缺效应",
                english: "Scarcity Effect",
                sections: [
                    { title: "定义", content: "当某样东西数量有限或难以获得时，人们会认为它更有价值，从而更渴望拥有它。" },
                    { title: "表现形式", content: [
                        "限量版商品：饥饿营销；",
                        "限时优惠：促使消费者立即行动；",
                        "独家资源：被视为珍贵。"
                    ]},
                    { title: "应用场景", content: [
                        "市场营销：制造稀缺感；",
                        "谈判：强调机会难得；",
                        "时间管理：利用时间限制提高效率。"
                    ]}
                ]
            },
            {
                name: "墨菲定律",
                english: "Murphy's Law",
                sections: [
                    { title: "定义", content: "凡是可能出错的事，就一定会出错。强调了事情发展的不确定性和风险。" },
                    { title: "表现形式", content: [
                        "排队：你选择的队伍总是最慢的；",
                        "物品掉落：越是想小心翼翼，越容易出错；",
                        "重要会议：越担心迟到，越容易遇到堵车。"
                    ]},
                    { title: "启示", content: [
                        "做好风险管理：预设可能出现的问题；",
                        "保持谨慎：不抱侥幸心理；",
                        "积极应对：即使出错也能迅速补救。"
                    ]}
                ]
            },
            {
                name: "认知吝啬",
                english: "Cognitive Miser",
                sections: [
                    { title: "定义", content: "人们倾向于使用最简单、最不费力的方式进行认知活动，以节省认知资源。" },
                    { title: "表现形式", content: [
                        "决策：依赖直觉和经验，而非深入分析；",
                        "信息处理：选择性接收和记忆；",
                        "判断：使用刻板印象和捷径。"
                    ]},
                    { title: "影响", content: [
                        "效率：快速决策；",
                        "偏差：可能导致错误判断；",
                        "思维惰性：缺乏深度思考。"
                    ]}
                ]
            },
            {
                name: "宜家效应",
                english: "IKEA Effect",
                sections: [
                    { title: "定义", content: "消费者对自己投入了劳动和精力所创造或组装的产品，会赋予更高的价值。" },
                    { title: "表现形式", content: [
                        "DIY产品：对手工制品更喜爱；",
                        "自己做饭：觉得比外面餐馆的更美味；",
                        "参与式设计：对有自己贡献的产品更认可。"
                    ]},
                    { title: "应用场景", content: [
                        "产品设计：鼓励用户参与定制；",
                        "服务体验：让顾客参与创造；",
                        "教育：通过实践加深理解。"
                    ]}
                ]
            }
        ];

        const homeScreen = document.getElementById('home-screen');
        const cardScreen = document.getElementById('card-screen');
        const startDrawBtn = document.getElementById('start-draw-btn');
        const drawAgainBtn = document.getElementById('draw-again-btn');
        const backHomeBtn = document.getElementById('back-home-btn');
        const cardEffectName = document.getElementById('card-effect-name');
        const cardEnglishName = document.getElementById('card-english-name');
        const cardContent = document.getElementById('card-content');
        const psychologyCard = document.getElementById('psychology-card');

        // 已抽取的卡片索引，防止重复抽取直到所有卡片都展示过
        let drawnIndexes = [];

        function getRandomCard() {
            if (drawnIndexes.length === terms.length) {
                // 如果所有卡片都已展示，重置已抽取列表
                drawnIndexes = [];
            }

            let randomIndex;
            do {
                randomIndex = Math.floor(Math.random() * terms.length);
            } while (drawnIndexes.includes(randomIndex)); // 确保不重复抽取

            drawnIndexes.push(randomIndex);
            return terms[randomIndex];
        }

        function displayCard(card) {
            cardEffectName.textContent = card.name;
            cardEnglishName.textContent = card.english;
            cardContent.innerHTML = ''; // 清空旧内容

            card.sections.forEach(section => {
                const sectionDiv = document.createElement('div');
                sectionDiv.classList.add('mb-6'); // Tailwind class for margin-bottom

                const titleSpan = document.createElement('span');
                titleSpan.classList.add('section-title');
                titleSpan.textContent = section.title;
                sectionDiv.appendChild(titleSpan);

                const contentDiv = document.createElement('div');
                contentDiv.classList.add('section-content', 'mt-2'); // Tailwind classes for margin-top
                if (Array.isArray(section.content)) {
                    const ul = document.createElement('ul');
                    section.content.forEach(item => {
                        const li = document.createElement('li');
                        li.textContent = item;
                        ul.appendChild(li);
                    });
                    contentDiv.appendChild(ul);
                } else {
                    const p = document.createElement('p');
                    p.textContent = section.content;
                    contentDiv.appendChild(p);
                }
                sectionDiv.appendChild(contentDiv);
                cardContent.appendChild(sectionDiv);
            });
        }

        function showHomeScreen() {
            homeScreen.style.display = 'flex';
            cardScreen.style.display = 'none';
        }

        function showCardScreen() {
            homeScreen.style.display = 'none';
            cardScreen.style.display = 'flex';
            psychologyCard.style.display = 'block'; // 显示卡片本身
            const randomCard = getRandomCard();
            displayCard(randomCard);
        }

        // 事件监听器
        startDrawBtn.addEventListener('click', showCardScreen);
        drawAgainBtn.addEventListener('click', showCardScreen);
        backHomeBtn.addEventListener('click', showHomeScreen);

        // 初始显示主页
        showHomeScreen();
    </script>
</body>
</html>
